<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>QQ彩贝导航</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            img{
                vertical-align: middle;
            }
            .clearfix:after{
                content:"";
                clear:both;
                display:table;
            }
            .fl{
                float:left;
            }
            .box_bg{
                background-image: linear-gradient(#fff,#ededed);
            }

            .box{
                width:1080px;
                height:90px;
                margin:0 auto;
                background:pink;
            }
            .box .logo{
                margin:30px 40px 0 0;
            }
            span{
                margin:10px;
            }
            a{
                font-size:18px;
                text-decoration: none;
                color:#333;
            }
            a:hover{
                color:red;
            }

            .nav{
                margin:40px 30px 0 0;
                position:relative;

            }
            .else img{
                margin:40px 5px;

            }
            .else img:hover{
                transform:rotate(360deg);
                transition:all 0.5s;

            }
            .nav div{
                position:absolute;
                width:37px;
                height:23px;
            }
            .nav .zhu{
                background-image:url("images/header_03.png");
                left:0;
                top:-22px;
            }
            .nav .pic1{
                background-image:url("images/header_05.png");
                width:24px;
            }
            .nav .hua{
                background-image:url("images/header_07.png");
                top:-22px;
                left:212px;
            }
            .nav .pic2{
                background-image:url("images/header_09.png");
                width:24px;
            }
            .pic1:hover{
                animation:animation 1s both;
            }
            .pic2:hover{
                animation:animation 1s both;
            }
            @keyframes animation{
                from{width:24px;

                }
                to{width:65px;

                }
            }
        </style>
    </head>
    <body>
    <div class="box_bg">
        <div class="box clearfix">
            <div class="logo fl">
                <img src="images/logo_170x46.png"/>
            </div>
            <div class="nav fl">
                <a href="#">返回商城</a>
                <span>|</span>
                <a href="#">商旅频道</a>
                <span>|</span>
                <a href="#">积分商城</a>
                <span>|</span>
                <a href="#">商旅频道</a>
                <span>|</span>
                <a href="#">了解彩贝</a>
                <span>|</span>
                <a href="#">彩贝活动</a>
                <span>|</span>
                <a href="#">个人活动</a>
                <div class="zhu"></div>
                <div class="zhu pic1"></div>
                <div class="hua"></div>
                <div class="hua pic2"></div>
            </div>
            <div class="else fl">
                <a href="#"><img src="images/iconsB_11.gif"/></a>
                <a href="#"><img src="images/iconsB_12.gif"/></a>
                <a href="#"><img src="images/iconsB_13.png"/></a>
            </div>
        </div>
    </div>
    </body>
</html>